<template>
  <div>
    <IesSelect :selectOption="options" v-model="value" @change="changeLang">
      <template slot-scope="scope" slot="options">
        <span style="float: left">{{ scope.data.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ scope.data.value }}</span>
      </template>
    </IesSelect>
  </div>
</template>

<script>
// 目的为了简化组件使用时的代码和统一风格
// 兼容el-select所有属性及方法
// 自定义模板使用时要如下slot="options" data是作用域data
//  <template slot-scope="scope" slot="options">
//     <span style="float: left">{{ scope.data.label }}</span>
//     <span style="float: right; color: #8492a6; font-size: 13px">{{ scope.data.value }}</span>
//   </template>
export default {
  data () {
    return {
      value: '',
      options: [{
        value: 'zh',
        label: '中文'
      }, {
        value: 'en',
        label: 'English'
      }]
    }
  },
  methods: {
    changeLang (val) {
      console.log('val: ', val)
    }
  }
}
</script>

<style scoped lang="scss">
</style>
